<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '需求进度',
    enablePullDownRefresh: true,
  },
}
</route>
<template>
  <page-meta :root-font-size="setting.rootFontSize"></page-meta>
  <!-- padding: 0 20rpx; -->
  <view
    style="
      display: flex;
      flex-direction: column;
      min-height: calc(100vh - 420rpx);
      padding-top: 320rpx;
      background-color: #f2f2f1;
    "
  >
    <view class="tabbar">
      <wd-navbar style="min-height: 100rpx" :title="`需求进度`" :bordered="false" safeAreaInsetTop>
        <template #left>
          <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
        </template>
      </wd-navbar>
      <view class="cu-bar search-container">
        <view class="search-form round">
          <!-- <myInput
              prefixIcon="search"
              clearable
              :inputBorder="false"
              confirm-type="search"
              @confirm="handleSearch"
              @clear="handleSearch"
              v-model="state.demandCode"
              placeholder="请输入单据编码"
            ></myInput> -->
          <wd-input
            type="text"
            prop="names"
            v-model="state.names"
            no-border
            clearable
            placeholder="搜索"
            style="display: flex; align-items: center; width: 100%; height: 100%; padding: 0 20rpx"
            @confirm="handleSearch"
            confirm-type="search"
          />
          <text class="filter-icon cuIcon-searchlist" @click="filterIsShow = true"></text>
        </view>
        <view class="action">
          <button
            @click="handleSearch()"
            class="cu-btn bg-gradual-green shadow-blur round"
            style="margin-right: 10rpx"
            v-if="checkPremiss('need_rdDemand_Process')"
          >
            查询
          </button>
          <!-- <button
            @click="handleAdd()"
            class="cu-btn bg-gradual-blue shadow-blur round"
            v-if="checkPremiss('need_rdDemand_add')"
          >
            新增
          </button> -->
        </view>
      </view>
      <view class="tabs">
        <view
          v-for="(item, index) in tableList"
          :class="['item', 'i' + index, item.value === activeTab ? 'on' : '']"
          :key="item.value"
          @click="onTabChange(item.value)"
        >
          {{ item.label }}
        </view>
      </view>
    </view>
    <view style="flex: 1">
      <template v-for="item in dataList" :key="item.id">
        <!-- <view class="card">
        <view class="main flex items-stretch" @click="detailHandle(item)">
          <view class="flex-1">
            <view class="title_row flex left flex-1">
              <view class="title">{{ getDataByDict(item.cusFlag, 1) }}:{{ item.demandCode }}</view>
            </view>
            <view>
              <view class="row flex">
                <view class="col">
                  <text class="label">类型：</text>
                  <text class="text">{{ getDataByDict(item.cusFlag, 1) || '' }}</text>
                </view>
              </view>

              <view class="row flex">
                <view class="col">
                  <text class="label">需求单类型：</text>
                  <text class="text">{{ item.demandType || '' }}</text>
                </view>
              </view>

              <view class="row flex">
                <view class="col">
                  <text class="label">客户/供应商：</text>
                  <text class="text">{{ item.cusName || '' }}</text>
                </view>
              </view>

              <view class="row flex">
                <view class="col">
                  <text class="label">区域：</text>
                  <text class="text">{{ item.deptName || '' }}</text>
                </view>
              </view>

              <view class="row flex">
                <view class="col">
                  <text class="label">项目名称：</text>
                  <text class="text">{{ item.petitionName || '' }}</text>
                </view>
              </view>

              <view class="row flex">
                <view class="col">
                  <text class="label">产品：</text>
                  <text class="text">{{ item.invName || '' }}</text>
                </view>
              </view>

              <view class="row flex">
                <view class="col">
                  <text class="label">需求描述：</text>
                  <text class="text">{{ item.demandDesc || '' }}</text>
                </view>
              </view>

              <view class="row flex">
                <view class="col">
                  <text class="label">需求人：</text>
                  <text class="text">{{ item.personName || '' }}</text>
                </view>
              </view>

              <view class="row flex">
                <view class="col">
                  <text class="label">要求完成时间：</text>
                  <text class="text">{{ item.askCompleteTime || '' }}</text>
                </view>
              </view>

              <view class="row flex">
                <view class="col">
                  <text class="label">评审状态：</text>
                  <text class="text">
                    <wd-tag
                      :bg-color="getTaskFlag(item.reviewStatus)['color']"
                      :color="getTaskFlag(item.reviewStatus)['color']"
                      plain
                    >
                      {{ getTaskFlag(item.reviewStatus)['label'] }}
                    </wd-tag>
                  </text>
                </view>
              </view>

              <view class="row flex">
                <view class="col">
                  <text class="label">进度状态：</text>
                  <text class="text">{{ item.projectName }}</text>
                </view>
              </view>

              <view class="row flex">
                <view class="col">
                  <text class="label">完成状态：</text>
                  <text class="text">
                    <wd-tag
                      :bg-color="getTaskAllStatus(item.taskAllStatus)['color']"
                      :color="getTaskAllStatus(item.taskAllStatus)['color']"
                      plain
                    >
                      {{ getTaskAllStatus(item.taskAllStatus)['label'] }}
                    </wd-tag>
                  </text>
                </view>
              </view>

              <view class="row flex">
                <view class="col">
                  <text class="label">完成日期：</text>
                  <text class="text">{{ item.completeTime }}</text>
                </view>
              </view>

              <view class="row flex">
                <view class="col">
                  <text class="label">是否逾期：</text>
                  <text class="text">{{ getDataByDict(item.lateFlag, 2) }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view> -->
        <uni-card
          :title="`${getDataByDict(item.cusFlag, 1)}`"
          :extra="`${item.demandCode}`"
          @click="detailHandle(item)"
        >
          <text class="uni-body">
            <view class="row flex">
              <view class="col">
                <text class="label">需求单类型：</text>
                <text class="text">{{ item.demandType || '' }}</text>
              </view>
            </view>
            <view class="row flex">
              <view class="col">
                <text class="label">客户/供应商：</text>
                <text class="text">{{ item.cusName || '' }}</text>
              </view>
            </view>

            <view class="row flex">
              <view class="col">
                <text class="label">区域：</text>
                <text class="text">{{ item.deptName || '' }}</text>
              </view>
            </view>

            <view class="row flex">
              <view class="col">
                <text class="label">项目名称：</text>
                <text class="text">{{ item.petitionName || '' }}</text>
              </view>
            </view>

            <view class="row flex">
              <view class="col">
                <text class="label">产品：</text>
                <text class="text">{{ item.invName || '' }}</text>
              </view>
            </view>

            <view class="row flex">
              <view class="col">
                <text class="label">需求描述：</text>
                <text class="text">{{ item.demandDesc || '' }}</text>
              </view>
            </view>

            <view class="row flex">
              <view class="col">
                <text class="label">需求人：</text>
                <text class="text">{{ item.personName || '' }}</text>
              </view>
            </view>

            <view class="row flex">
              <view class="col">
                <text class="label">要求完成时间：</text>
                <text class="text">{{ item.askCompleteTime || '' }}</text>
              </view>
            </view>

            <view class="row flex">
              <view class="col">
                <text class="label">评审状态：</text>
                <text class="text">
                  <wd-tag
                    :bg-color="getTaskFlag(item.reviewStatus)['color']"
                    :color="getTaskFlag(item.reviewStatus)['color']"
                    plain
                  >
                    {{ getTaskFlag(item.reviewStatus)['label'] }}
                  </wd-tag>
                </text>
              </view>
            </view>

            <view class="row flex">
              <view class="col">
                <text class="label">进度状态：</text>
                <text class="text">{{ item.projectName }}</text>
              </view>
            </view>

            <!-- <view class="row flex">
            <view class="col">
              <text class="label">完成状态：</text>
              <text class="text">
                <wd-tag
                  :bg-color="getTaskAllStatus(item.taskAllStatus)['color']"
                  :color="getTaskAllStatus(item.taskAllStatus)['color']"
                  plain
                >
                  {{ getTaskAllStatus(item.taskAllStatus)['label'] }}
                </wd-tag>
              </text>
            </view>
          </view> -->

            <view class="row flex">
              <view class="col">
                <text class="label">完成日期：</text>
                <text class="text">{{ item.completeTime }}</text>
              </view>
            </view>

            <!-- <view class="row flex">
            <view class="col">
              <text class="label">是否逾期：</text>
              <text class="text">{{ getDataByDict(item.lateFlag, 2) }}</text>
            </view>
          </view> -->
          </text>
          <view slot="actions" class="card-actions">
            <!-- <view class="card-actions-item">
            <view class="row flex">
              <view class="col">
                <text class="label">评审状态：</text>
                <text class="text">
                  <wd-tag
                    :bg-color="getTaskFlag(item.reviewStatus)['color']"
                    :color="getTaskFlag(item.reviewStatus)['color']"
                    plain
                  >
                    {{ getTaskFlag(item.reviewStatus)['label'] }}
                  </wd-tag>
                </text>
              </view>
            </view>
          </view> -->
            <view class="card-actions-item">
              <view class="row flex">
                <view class="col">
                  <text class="label">完成状态：</text>
                  <text class="text">
                    <wd-tag
                      :bg-color="getTaskAllStatus(item.taskAllStatus)['color']"
                      :color="getTaskAllStatus(item.taskAllStatus)['color']"
                      plain
                    >
                      {{ getTaskAllStatus(item.taskAllStatus)['label'] }}
                    </wd-tag>
                  </text>
                </view>
              </view>
            </view>
            <view class="card-actions-item">
              <!-- <view class="row flex">
              <view class="col">
                <text class="label">是否逾期：</text>
                <text class="text">{{ getDataByDict(item.lateFlag, 2) }}</text>
              </view>
            </view> -->

              <template v-if="item.lateFlag == 1">
                <!-- <wd-tag bg-color="#108ee9" color="#108ee9" plain></wd-tag> -->
                <text style="color: #ff633d">逾期</text>
              </template>
              <!-- <template v-else>
                <text style="color: #108ee9">未逾期</text>
              </template> -->
            </view>
          </view>
        </uni-card>
      </template>
      <wd-loadmore
        :state="loadMore"
        finishedText="没有更多了"
        @reload="handleSearch()"
      ></wd-loadmore>
    </view>

    <wd-popup
      v-model="filterIsShow"
      position="bottom"
      :close-on-click-modal="false"
      custom-style="padding: 32rpx;border-top-left-radius:60rpx;border-top-right-radius:60rpx;"
      @close="handleClose"
    >
      <view class="cu-dialog" @click.stop="">
        <view class="cu-bar bg-white" style="min-height: 60rpx !important">
          <view class="action"></view>
          <view class="action mks" @click="filterIsShow = false">取消</view>
          <!-- <view class="action text-blue mks" @tap="handleSearch()">确定</view> -->
        </view>
        <view class="filter_container">
          <!-- <view class="block">
            <view class="label">需求单号</view>
            <view class="row">
              <input type="text" v-model="state.demandCode" placeholder="请输入需求单号" />
            </view>
          </view> -->
          <!-- <th-form-item label="需求单号">
              <view class="text seq-no-text">
                <wd-input
                  type="text"
                  v-model="state.demandCode"
                  clearable
                  placeholder="请输入需求单号"
                  no-border
                  style="width: 100%"
                />
              </view>
            </th-form-item> -->
          <!-- <view class="block">
            <view class="label">需求产品</view>
            <view class="row">
              <input type="text" v-model="state.invName" placeholder="请输入需求产品" />
            </view>
          </view> -->
          <!-- <th-form-item label="需求产品">
              <view class="text seq-no-text">
                <wd-input
                  type="text"
                  v-model="state.invName"
                  clearable
                  placeholder="请输入需求产品"
                  no-border
                  style="width: 100%"
                />
              </view>
            </th-form-item> -->
          <th-form-item label="评审状态">
            <wd-picker
              :columns="reviewStatusCoumn"
              label=" "
              v-model="state.reviewStatus"
              style="width: 100%"
            />
          </th-form-item>
          <th-form-item label="完成状态">
            <wd-picker
              :columns="reviewStatusCoumn"
              label=" "
              v-model="state.taskAllStatus"
              style="width: 100%"
            />
          </th-form-item>
          <view class="block">
            <view class="label">开始日期</view>
            <view class="row">
              <uni-datetime-picker
                type="date"
                return-type="string"
                v-model="state.startTime"
                placeholder="开始日期"
              />
            </view>
          </view>
          <view class="block">
            <view class="label">结束日期</view>
            <view class="row">
              <uni-datetime-picker
                type="date"
                return-type="string"
                v-model="state.endTime"
                placeholder="结束日期"
              />
            </view>
          </view>
          <!-- <th-form-item label="日期">
              <view class="text seq-no-text">
                <wd-datetime-picker
                  type="date"
                  v-model="demandDateList"
                  label=""
                  :display-format-tab-label="displayFormatTabLabel"
                  @confirm="handleConfirm"
                  style="width: 100%"
                  class="s-date"
                  clearable
                ></wd-datetime-picker>
              </view>
            </th-form-item> -->
          <!-- <view class="block">
              <view class="label">需求单号</view>
              <view class="row">
                <wd-input
                  type="text"
                  v-model="state.demandCode"
                  clearable
                  placeholder="请输入需求单号"
                  style="width: 100%"
                />
              </view>
            </view> -->
          <!-- <view class="block">
              <view class="label">需求产品</view>
              <view class="row">
                <wd-input
                  type="text"
                  v-model="state.invName"
                  clearable
                  placeholder="请输入需求产品"
                  style="width: 100%"
                />
              </view>
            </view> -->
          <!-- <view class="block">
              <view class="label">日期</view>
              <view class="row">
                <wd-datetime-picker
                  type="date"
                  v-model="demandDateList"
                  label=""
                  :display-format-tab-label="displayFormatTabLabel"
                  @confirm="handleConfirm"
                  style="width: 100%"
                  class="s-date"
                  clearable
                >
                </wd-datetime-picker>
              </view>
            </view> -->

          <view class="block" style="margin-top: 60rpx">
            <view class="row">
              <view class="btn" @click="resetFilter">重置</view>
              <view class="btn primary" @click="handleSearch()">查询</view>
            </view>
          </view>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script lang="ts" setup name="sign">
import { useSetting } from '@/stores/setting';
import { getRdDemandPageProcess } from '@/service/rdProcess';
import { formatByDayjs } from '@/utils/util';
import { useDict } from '@/hooks/dict';
import { useUserStore } from '@/stores/user';
const dataList = ref([]);
const setting = useSetting();

const page = ref(1);
const loading = ref(false);
const loadMore = ref<any>('finished');
const userStore: any = useUserStore();
const { review_status } = useDict('review_status');

const tableList = ref([
  {
    label: '进行中',
    value: '1',
    color: '#108ee9',
  },
  {
    label: '已完成',
    value: '2',
    color: '#d46b08',
  },
  {
    label: '全部',
    value: null,
    color: '#108ee9',
  },
  // {
  //   text: '撤回',
  //   value: '9',
  //   color: '#f50',
  // },
]);

const cus_flag_status = ref([
  {
    label: '客户需求单',
    value: '0',
  },
  {
    label: '非客户需求单',
    value: '1',
  },
  {
    label: '采购需求单',
    value: '3',
  },
]);

const late_flag_status = ref([
  {
    label: '否',
    value: 0,
  },
  {
    label: '是',
    value: 1,
  },
]);

const getDataByDict = (val, type) => {
  let o = null;
  if (type == 1) {
    o = cus_flag_status.value.find((item) => item.value == val);
  } else if (type == 2) {
    o = late_flag_status.value.find((item) => item.value == val);
  }

  return o ? o['label'] : '';
};

const state = reactive({
  demandCode: null,
  status: null,
  invName: null,
  demandDate: null,
  size: 20,
  endTime: null,
  startTime: null,
  names: null,
  reviewStatus: null,
  taskAllStatus: '1',
});

onLoad((options) => {
  refresh();
});

// onShow(() => {
//   refresh();
// });

const resizeParams = (data) => {
  const o = {};
  Object.keys(data).forEach((item) => {
    if (data[item] !== null && data[item] !== '') {
      o[item] = data[item];
    }
  });
  return o;
};

const getWebSql = (data) => {
  debugger;
  let s = '';
  Object.keys(data).forEach((item) => {});
};

const getData = () => {
  uni.showLoading();
  loading.value = true;
  const params = resizeParams(state);
  // getWebSql(params);
  loadMore.value = 'loading';
  getRdDemandPageProcess({
    current: page.value,
    descs: 'create_time',
    ...params,
  })
    .then((res) => {
      if (res.code !== 0) {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        });
        return;
      }
      dataList.value = dataList.value.concat(res.data.records);
      if (res.data.records.length === state.size) {
        loadMore.value = 'loadEnd';
      } else {
        loadMore.value = 'finished';
      }
    })
    .catch((err) => {
      loadMore.value = 'finished';
      uni.showToast({
        title: err.data?.msg || err.msg,
        icon: 'none',
      });
    })
    .finally(() => {
      uni.hideLoading();
      loading.value = false;
      uni.stopPullDownRefresh();
    });
};

const goBack = () => {
  uni.navigateBack();
};

const filterIsShow = ref(false);
const handleSearch = (e?) => {
  // if (e !== undefined) {
  //   state.demandCode = e;
  // }
  // console.log(demandDateList.value);
  // let startDate = demandDateList.value[0];
  // let endDate = demandDateList.value[1];

  // 判断时间
  let startDate = state.startTime;
  let endDate = state.endTime;
  if (endDate && new Date(startDate).getTime() > new Date(endDate).getTime()) {
    uni.showToast({
      title: '开始时间不能大于结束时间',
      icon: 'none',
      mask: true,
    });
    return;
  }
  if (endDate || startDate) {
    startDate = startDate
      ? formatByDayjs(startDate, 'YYYY-MM-DD 00:00:00')
      : formatByDayjs(endDate, 'YYYY-MM-DD 00:00:00');
    endDate = endDate
      ? formatByDayjs(endDate, 'YYYY-MM-DD 00:00:00')
      : formatByDayjs(startDate, 'YYYY-MM-DD 00:00:00');
    state['webSql'] = `demand_date between '${startDate}' and '${endDate}'`;
  } else {
    state['webSql'] = null;
  }
  dataList.value = [];
  page.value = 1;
  // state.demandDate = state.demandDate
  //   ? formatByDayjs(state.demandDate, 'YYYY-MM-DD 00:00:00')
  //   : null;
  getData();
  filterIsShow.value = false;
};
const handleAdd = () => {
  uni.navigateTo({
    url: '/pages/pm/requirement/form?cusFlag=' + state.cusFlag,
  });
};

const activeTab = ref('1');

const onTabChange = (e) => {
  activeTab.value = e;
  state.taskAllStatus = e;
  dataList.value = [];
  page.value = 1;
  handleSearch();
  // resetFilter();
};

onPullDownRefresh(() => {
  //重新获取
  // if (loading.value) return;
  // dataList.value = [];
  // page.value = 1;
  // getData();
  refresh();
});
onReachBottom(() => {
  if (loading.value) return;
  // page.value++;
  // getData();
  if (loadMore.value === 'loadEnd') {
    page.value++;
    getData();
  }
});

const refresh = () => {
  dataList.value = [];
  page.value = 1;
  getData();
};

uni.$on('refresh', () => {
  refresh();
});

const handleClose = () => {
  filterIsShow.value = false;
};

const resetFilter = () => {
  handleClose();
  state.demandCode = null;
  state.invName = null;
  state.demandDate = null;
  demandDateList.value = ['', ''];
  state.startTime = null;
  state.endTime = null;
  state.names = null;
  handleSearch();
};

const demandDateList = ref(['', '']);
const displayFormatTabLabel = (items) => {
  return `${items[0].label}年${items[1].label}月${items[2].label}日`;
};

const handleConfirm = ({ value }) => {
  console.log(new Date(value));
};

const checkPremiss = (k) => {
  return userStore.userInfos.authBtnList.some((v: string) => v === k);
};

const getTaskFlag = (taskFlag) => {
  const taskflagList = [
    {
      text: '',
      value: null,
      color: '',
    },
    {
      text: '未提交',
      value: '0',
      color: '#108ee9',
    },
    {
      text: '待评审',
      value: '1',
      color: '#108ee9',
    },
    {
      text: '通过',
      value: '2',
      color: '#87d068',
    },
    {
      text: '不通过',
      value: '3',
      color: '#f50',
    },
  ];

  const o1 = taskflagList.find((item) => item.value == taskFlag);
  const o = review_status.value.find((item) => item.value == taskFlag);
  return o
    ? {
        ...o,
        color: o1['color'],
      }
    : { text: taskFlag };
};

const { task_all_status } = useDict('task_all_status');
const getTaskAllStatus = (taskFlag) => {
  const taskflagList = [
    {
      text: '',
      value: null,
      color: '',
    },
    {
      label: '未开始',
      value: 0,
      color: '#108ee9',
    },
    {
      label: '进行中',
      value: 1,
      color: '#108ee9',
    },
    {
      label: '完成',
      value: 2,
      color: '#87d068',
    },
    {
      label: '中止',
      value: 3,
      color: '#f50',
    },
    {
      label: '关闭',
      value: 4,
      color: '#f50',
    },
  ];

  const o1 = taskflagList.find((item) => item.value == taskFlag);
  const o = task_all_status.value.find((item) => item.value == taskFlag);
  return o
    ? {
        ...o,
        color: o1['color'],
      }
    : { text: taskFlag };
};

const detailHandle = (row) => {
  if (row.cusFlag == 3) {
    uni.navigateTo({
      url: '/pages/pm/gongying/form?id=' + row.id + '&cusFlag=3',
    });
    return;
  } else {
    uni.navigateTo({
      url: '/pages/pm/requirement/form?id=' + row.id,
    });
  }
};

const reviewStatusCoumn = ref([
  {
    label: '全部',
    value: '',
  },
  {
    label: '未提交',
    value: '0',
  },
  {
    label: '待评审',
    value: '1',
  },
  {
    label: '通过',
    value: '2',
  },
  {
    label: '不通过',
    value: '3',
  },
]);

const taskAllStatusColumn = ref([
  {
    label: '全部',
    value: '',
  },
  {
    label: '未开始',
    value: 0,
  },
  {
    label: '进行中',
    value: 1,
  },
  {
    label: '完成',
    value: 2,
  },
  {
    label: '中止',
    value: 3,
  },
  {
    label: '关闭',
    value: 4,
  },
]);
</script>

<style lang="scss">
$padding: 30rpx;

.canvas-box {
  .canvas {
    height: 300rpx;
    transition: height 0.3s;
  }

  .btns {
    margin-top: 10rpx;
    transition: transform 0.3s;

    .btn {
      width: auto;
      height: 50rpx;
    }
  }
}

.full-screen {
  flex-direction: row;
  height: calc(100vh - 88rpx);

  .canvas {
    width: calc(100% - 100rpx);
    height: 100%;
    margin-left: 100rpx;
  }

  .btns {
    position: absolute;
    align-items: center;
    width: calc(100vh - (88rpx + $padding * 2));
    height: 100rpx;
    transform: translate(100rpx, 0) rotate(90deg);
    transform-origin: top left;

    .btn-box {
      flex-direction: row;
    }
  }
}

.tabbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
  background: linear-gradient(45deg, #0081ff, #1ab3f5);
}

.tabbar_c {
  height: 100%;
  font-weight: 800;
  color: white;
  letter-spacing: 2px;
  background: linear-gradient(45deg, #0081ff, #1ab3f5);
}

.bolck {
  background: linear-gradient(45deg, #0081ff, #1ab3f5);
}

.task_list {
  background: #f7f7f7;
}

.cu-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
}

.cu-bar .search-form {
  display: flex;
  flex: 1;
  align-items: center;
  height: 64rpx;
  margin: 0 30rpx;
  overflow: hidden;
  /* padding: 0 40rpx; */
  font-size: 24rpx;
  line-height: 64rpx;
  color: #333;
  background-color: white;
}

.search-container .filter-icon {
  padding: 0 18rpx;
  margin: 0;
  font-size: 40rpx;
  color: #007aff;
  border-left: 1rpx solid #f3f3f3;
}

.round {
  border-radius: 2500px;
}

.cu-bar .search-form + .action {
  margin-right: 30rpx;
}

.cu-bar .action {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 100%;
}

.search-container .action .cu-btn {
  padding: 0 24rpx;
}

.bg-gradual-green {
  color: #fff;
  background-image: linear-gradient(45deg, #39b54a, #8dc63f);
}

.bg-gradual-blue {
  color: #fff;
  background-image: linear-gradient(45deg, #0c62d3, #2a73d3);
}

.cu-btn {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64rpx;
  padding: 0 30rpx;
  margin-right: initial;
  margin-left: initial;
  overflow: visible;
  font-size: 28rpx;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: 0;
  transform: translate(0, 0);
}

.tabs {
  display: flex;
  justify-content: space-between;
  padding: 0 50rpx;
  margin-top: 15rpx;

  .item {
    position: relative;
    padding: 15rpx 0;
    font-size: 30rpx;
    color: #fff;
    text-align: center;
    opacity: 0.5;
    transition: all 0.3s;

    &.on {
      opacity: 1;

      &::after {
        position: absolute;
        bottom: -8rpx;
        left: 50%;
        width: 12rpx;
        height: 12rpx;
        content: '';
        background: #f1f1f1;
        border-radius: 50%;
        transform: translate(-50%);
      }
    }
  }
}

// :deep(.wd-navbar) {
//   background: inherit;
// }

.cu-dialog {
  font-size: 28rpx;
}

.cu-dialog > .cu-bar:first-child .action {
  margin-right: 20rpx;
}

.filter_container {
  padding: 10rpx 32rpx 32rpx;
  padding-bottom: 64rpx;
  text-align: left;
  background-color: #fff;

  .block {
    ~ .block {
      margin-top: 32rpx;
    }

    .label {
      margin-bottom: 20rpx;
      font-weight: bold;
    }
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    .date-picker {
      flex: 1;
      padding: 16rpx;
      text-align: center;
      background-color: #f7f7f7;
      border-radius: 8rpx;
    }

    .select-box {
      flex: 1;
      padding: 16rpx;
      background-color: #f7f7f7;
      border-radius: 8rpx;

      :deep(.select-row) {
        padding: 0;
        background: none;
      }
    }

    input {
      flex: 1;
      height: 33rpx;
      padding: 16rpx 12rpx;
      font-size: 26rpx !important;
      background-color: #f7f7f7;
      border: 1rpx solid #f7f7f7;
      border-radius: 8rpx;

      .input-placeholder {
        color: #8a929f;
      }
    }

    .btn {
      flex: 1;
      padding: 16rpx;
      color: #999;
      text-align: center;
      background-color: #f7f7f7;
      border: 1rpx solid #dedede;
      border-radius: 8rpx;

      ~ .btn {
        margin-left: 24rpx;
      }

      &.primary {
        color: #fff;
        background-color: #007aff;
        border-color: #007aff;
      }
    }
  }
}

:deep(.wd-navbar__left--hover) {
  background: none;
}

.s-date {
  .wd-picker__cell {
    padding: 0 !important;
  }
}

.form-item {
  padding: 24rpx 0 !important;
  margin: 0 !important;
}
</style>

<style scoped lang="scss">
.card {
  padding: 24rpx 20rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  background: #fff;
  border-radius: 15rpx;
  /* box-shadow: 0 15rpx 10rpx 0 #f7f7f7; */
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.main {
  .title_row {
    align-items: flex-start;
    overflow: hidden;
  }

  .title {
    flex: 1;
    margin-bottom: 32rpx;
    overflow: hidden;
    font-size: 32rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .row {
    align-items: flex-start;
    margin-bottom: 24rpx;

    .col {
      display: flex;
      flex: 1;
      min-width: 45%;
      line-height: 28rpx;

      ~ .col {
        margin-left: 12rpx;
      }

      .label {
        flex-shrink: 0;
        width: 200rpx;
        font-size: 26rpx;
        color: #888;
      }

      .text {
        font-size: 28rpx;
        color: #000;
      }
    }
  }

  .left {
    overflow: hidden;
  }

  .right {
    flex-shrink: 0;
    margin-left: 12rpx;
    font-size: 24rpx;
    color: #666;
  }
}

.footer {
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding-top: 24rpx;
  font-size: 24rpx;
  color: #666;

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1rpx;
    content: '';
    background-color: #f3f3f3;
  }

  .unit ~ .unit {
    margin-left: 18rpx;
  }

  .action {
    position: relative;
    right: -24rpx;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: 6rpx 24rpx;
    font-size: 26rpx;

    .btn {
      padding: 6rpx 12rpx;

      ~ .btn {
        margin-left: 16rpx;
      }
    }

    .primary {
      color: #007aff;
    }

    .danger {
      color: #f56c6c;
    }
  }
  /* // .action {
        // 	padding: 6rpx 0 6rpx;
        // 	font-size: 26rpx;
        // 	color: #007aff;
        // } */
}

:deep(.wd-tag__text) {
  padding: 2rpx 4rpx !important;

  // font-size: 28rpx !important;
}

.custom-cover {
  position: relative;
  flex: 1;
  flex-direction: row;
}

.cover-content {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  padding-left: 15px;
  font-size: 14px;
  color: #fff;
  background-color: rgba($color: #000, $alpha: 40%);
}

.card-actions {
  display: flex;
  flex-direction: row;
  align-items: center;

  // justify-content: space-around;
  justify-content: space-between;
  height: 25px;
  padding-top: 10px;
  margin-top: 5px;
  border-top: 1px #eee solid;
}

.card-actions-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.card-actions-item-text {
  margin-left: 5px;
  font-size: 12px;
  color: #666;
}

:deep(.wd-picker__cell) {
  padding: 0 !important;
}

:deep(.wd-picker__label) {
  width: 0 !important;
}
</style>
